<template>
  <el-menu
    :default-active="currentActive"
    unique-opened
    mode="vertical"
    class="el-menu-vertical-demo"
    :backgroundColor="menuStyle.background"
    :textColor="menuStyle.text"
    :active-text-color="menuStyle.active"
    :collapse="isCollapse">
    <menu-item :menuData="menuData"></menu-item>
  </el-menu>
</template>
<script type="text/javascript">
import bus from '@/common/util/bus.js'
import menuItem from './item'

export default {
  name: 'app',
  props: {
    currentActive: String,
    menuData: Array,
    menuStyle: {
      type: Object,
      default: function () {
        return {
          background: '#FFFFFF',
          text: '#FFFFFF',
          active: '#FFFFFF'
        }
      }
    }
  },
  data () {
    return {
      isCollapse: false
    }
  },
  components: {
    menuItem
  },
  created () {
    //  折叠按钮
    bus.$on('collapse', (value) => {
      this.isCollapse = value
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.el-menu {
  border: 0 !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
